<script lang="ts" setup>
import { ref, onMounted } from 'vue';

// 定义任务对象的类型
interface Task {
  id: number;
  title: string;
  type: string;
  date: string;
  completionDate?: string;
  status: '已完成' | '进行中' | '未开始';
  subtasks: Task[];
  _rev?: string;
}

// 示例任务数据
const tasks = ref<Task[]>([]);

// 存储任务列表的key
const TASK_LIST_KEY = 'task-list';

const selectedTask = ref<Task | null>(null);

// 任务操作函数
function addTask() {
  const newTask: Task = {
    id: Date.now(), // 使用时间戳作为任务ID
    title: '新任务',
    type: '默认类型',
    date: new Date().toISOString(),
    status: '未开始',
    subtasks: []
  };

 updateTaskContent(newTask, "默认的内容")
  tasks.value.push(newTask);
  updateTask()
}

// 读取任务列表
onMounted(() => {
  tasks.value = getTaskList();
  console.log(tasks.value)
});

function deleteTask(taskId: number) {
  // 删除任务逻辑
}

function updateTask() {
  // 将任务列表转换为 JSON 字符串
  const serializedTasks = JSON.stringify(tasks.value);
  // 存储 JSON 字符串
  utools.dbStorage.setItem(TASK_LIST_KEY, serializedTasks);
}

function getTaskList() {
  const value = utools.dbStorage.getItem(TASK_LIST_KEY);
  return value ? JSON.parse(value) : [];
}

async function updateTaskContent(task: Task, content: string) {
  const info = {
    _id: `task-content-${task.id}`,
    _rev: task._rev || '',
    content: content,
  }

  let result = await utools.db.promises.put(info);
  if (result.ok) {
    // 保存成功, 更新文档版本
    task._rev = result.rev;
  } else if (result.error) {
    // 保存出错，打印错误原因
    console.log(result.message);
  }
}

async function getTaskListContent(taskId: number) {
  let id = `task-content-${taskId}`;
  const doc = await utools.db.promises.get(id);
  console.log(doc.content)
  return doc
}

async function deleteTaskContetnt(taskId: number) {
  let id = `task-content-${taskId}`;
  const doc = await utools.db.promises.get(id);
  if (doc) {
    const result = await utools.db.promises.remove(doc);
    if (result.ok) {
      console.log("删除成功");
    } else if (result.error) {
      // 删除失败，打印错误原因
      console.log(result.message);
    }
  }
}


function selectTask(task: Task) {
  selectedTask.value = task;
}
</script>

<template>
  <div class="task-manager">
    <nav class="navbar">
      <div>已完成: {{tasks.filter(task => task.status === '已完成').length}}</div>
      <div>进行中: {{tasks.filter(task => task.status === '进行中').length}}</div>
      <div>未开始: {{tasks.filter(task => task.status === '未开始').length}}</div>
      <button @click="addTask">新增任务</button>
    </nav>
    <div class="content">
      <div class="task-list">
        <ul>
          <li v-for="task in tasks" :key="task.id" @click="selectTask(task)">
            {{ task.title }}
          </li>
        </ul>
      </div>
      <div class="task-detail" v-if="selectedTask">
        <h2>{{ selectedTask.title }}</h2>
        <p>{{ getTaskListContent(selectedTask.id) }}</p>
        <!-- 这里可以添加更多任务详细信息 -->
      </div>
    </div>
  </div>
</template>

<style>
.task-manager {
  display: flex;
  flex-direction: column;
}

.navbar {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #f5f5f5;
}

.content {
  display: flex;
}

.task-list {
  width: 30%;
  border-right: 1px solid #ddd;
}

.task-detail {
  width: 70%;
  padding: 10px;
}
</style>
